<template>
	<view class="chatbox">
		<view  v-for="(item,index) in photolist" :key="item.id" >
			<view class="chatboxitem" @tap="clickbox(item.id)">
				<image class="chatboximg" :src="item.img" mode="aspectFit"></image>
			</view>
		<view class="chatboxtit">
			{{item.title}}
		</view>
		</view>
		
	</view>
</template>

<script>
	import $http from "@/common/api/request.js"
	export default{
		props:['friendID','userid'],
		
		data(){
			return{
				baseurl:"https://zyc618.mynatapp.cc",
				photolist:[{id:0,img:"../../static/tabBar/chatbox/photo.png",title:"图片"},
				{id:1,img:"../../static/tabBar/chatbox/paizhao.png",title:"拍照"},
				{id:2,img:"../../static/tabBar/chatbox/dingwei.png",title:"定位"},
				{id:3,img:"../../static/tabBar/chatbox/VideoCommunication.png",title:"视频通话"},
				{id:4,img:"../../static/tabBar/chatbox/voiceCall.png",title:"语音通话"},
				{id:5,img:"../../static/tabBar/chatbox/files.png",title:"文件"},
				],
				peopleInfo:{}//用户和朋友id
			}
		},
		methods:{
			clickbox(index){
				if(index==0 || index ==1)
					this.clickCamera(index)
				else if(index==2){
					this.clicklocation()
				}else if(index == 3 || index == 4){
					this.clickvideo(index==3? '视频通话':'语音通话')
				}
			},
			//点击图片或者相机:
			clickCamera(index){
				let count = 0;
				if(index){
					count = 9;
				}else{
					count = 1;
				}
				uni.chooseImage({
					count,
					sizeType: ['original'],
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						let tempFilePaths = res.tempFilePaths;
						this.updatasendimg(tempFilePaths[0])
					}
				})
			},
			//点击  定位   的回调函数:Android
			clicklocation(){
				uni.chooseLocation({
					success: (res) =>{
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						let localdata ={name:res.name,address:res.address,latitude:res.latitude,longitude:res.longitude}
						
						//一对一消息保存:+事件总线:
						this.savelocation(localdata)
						
						
					}
				});
			},
			//文件命名方式:
			formattedDate() {
				  const rawDate = new Date();
			      const year = rawDate.getFullYear();
			      const month = (rawDate.getMonth() + 1).toString().padStart(2, '0');
			      const day = rawDate.getDate().toString().padStart(2, '0');
			      return `${year}${month}${day}`;
			    },
			//图片上传到服务器去的方法:
			updatasendimg(pathfile){
				const uploadTask=uni.uploadFile({
					url: this.baseurl+'/api/files/upload', //仅为示例，非真实的接口地址
					filePath:pathfile,
					name: 'file',
					formData: {
						url: this.formattedDate(),
						pathname:this.userid + Date.now()
					},
					success: (uploadFileRes) => {
						
						let imgdatalist =JSON.parse(uploadFileRes.data);
						if(imgdatalist.data.code == 200){
							//获取后端处理图片地址信息,完成信息修改
							this.savemsg(imgdatalist.data.url);
							
						}
					},
					fail(err) {
						console.log(err);
					}
				});
				
			},
			//一对一:图片数据库保存消息
			savemsg(imgurl){
				$http.request({
					url: "/addcontentmessageschema",
					method: "POST",
					header:{
						token:true
					},
					data: {
						message: imgurl,
						userID:this.userid,
						friendID:this.friendID,
						types:1//图片格式
					}
				}).then((res) => {
					if(res.code === 200){
						//数据库信息填写完毕才能继续事件请求:
						uni.$emit("getfilepaths",JSON.stringify(imgurl));
					}else{
						uni.showToast({
							title:"异常",
							icon:"none"
						})
					}
					
				}).catch((err) => {
					console.log(err);
				})
				
			},
			savelocation(data){
				$http.request({
					url: "/addcontentmessageschema",
					method: "POST",
					header:{
						token:true
					},
					data: {
						message:JSON.stringify(data),
						userID:this.userid,
						friendID:this.friendID,
						types:3//地址格式
					}
				}).then((res) => {
					if(res.code === 200){
						//数据库信息填写完毕才能继续事件请求:
						uni.$emit("getlocationdetail",JSON.stringify(data))
					}else{
						uni.showToast({
							title:"异常",
							icon:"none"
						})
					}
					
				}).catch((err) => {
					console.log(err);
				})
			},
			clickvideo(context){
				
				uni.$emit("videotap",{videotitle:context})
			}
		}
	}
</script>

<style lang="scss">
	.chatbox{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		flex: 1;
		padding: 30rpx;
		.chatboxitem{
			padding: 10rpx;
			width: 105rpx;
			height: 100rpx;
			background-color: #fff;
			margin:10rpx 20rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.chatboximg{
				width: 70%;
				height: 70rpx;
			}
		}
		.chatboxtit{
			text-align: center;
		}
	}
	
</style>